<template>
  <div v-if="showCamera">
    <div class="cameraShadow" id="cameraShadow"></div>
    <dv-border-box-11 title="监控视频" class="cameraBg">
      <div ref="boxContent" class="boxContent">
        <video ref="videoPlayer" class="video-js player"></video>
      </div>
      <el-tooltip class="box-item" effect="dark" content="关闭" placement="top-start">
        <el-icon class="closeIcon" @click="closeWindow">
          <CircleClose />
        </el-icon>
      </el-tooltip>
    </dv-border-box-11>
  </div>
</template>
    
  
<script lang="ts">

import {
  defineComponent,
  ref,
  computed,
  reactive,
  onMounted,
  onUnmounted,
  watch,
} from "vue";
import videojs from "video.js"
import "video.js/dist/video-js.css"
import { useStore } from "vuex";
import bus from '@/utils/bus'

// 声明类型
const PropsType = {
  data: {
    type: Object,
    require: true,
  },
}

export default defineComponent({
  props: PropsType,
  components: {
    
  },
  setup(props) {
    const datavColors = computed(() => useStore().state.datavColors);
    const oWebControl = ref(null);
    const initCount = ref(0);
    const showCamera = ref(false);
    const boxContent = ref(null);
    const hasInit = ref(false)
    const videoPlayer = ref(null)
    const myPlayer = ref(null)
    

    const playm3u8 = (url: any) => {
      console.log(url);
      showCamera.value = true
      setTimeout(() => {
        myPlayer.value = videojs(videoPlayer.value, {
          controls: true,
          language: 'zh-CN',
          sources: [
            {
              src: url,
              // type: 'video/flv',
              type: 'application/x-mpegURL',
            }
          ],
          autoplay:true,
          controlBar: {
            remainingTimeDisplay: {
              displayNegative: false
            }
          },
          playbackRates: [0.5, 1, 1.5, 2]
        }, () => {
          // myPlayer.value.play()
          
        })
      }, 100);
    }

    // 启用监听
    bus.on('playm3u8', playm3u8);


    // 监听
    watch(
      () => props.data,
      (val: any) => {
        console.log(val);
      }
    );

    onMounted(() => {
      //
      
    });

    onUnmounted(() => {
      bus.off('playm3u8', playm3u8);
      if (myPlayer.value) {
        myPlayer.value.dispose()
      }
    });
    //methods

    const closeWindow = () => {
      hiddenWindow()
    }

    const hiddenWindow = () => {
      //
      if (myPlayer.value) {
        myPlayer.value.dispose()
      }
      showCamera.value = false
    }

    return {
      datavColors,
      oWebControl,
      initCount,
      showCamera,
      hasInit,
      boxContent,
      videoPlayer,
      hiddenWindow,
      closeWindow,
    };
  },
});
</script>
    
<style lang="scss" scoped>
@import "@/assets/scss/index.scss";
$px: 20px;

.cameraShadow {
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  z-index: 900000;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.cameraBg {
  position: fixed;
  z-index: 900002;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -40%);
  padding: 60px 20px 20px 20px;
  width: 1200px;
  height: 780px;

  .boxContent {
    width: 100%;
    height: 100%;
    .player{
      width: 100%;
      height: 100%;
    }
  }

  .closeIcon {
    position: absolute;
    top: 0px;
    right: 0px;
    top: -50px;
    right: -50px;
    font-size: 30px;
    cursor: pointer;
  }
}
</style>
    